<template>
  <div class="app-container">
    <el-card>
      <el-form size="mini" :model="listQuery" inline label-width="auto" label-position="left">
        <el-form-item label="关键字：">
          <el-input size="small" style="margin-bottom: 10px" placeholder="请输入搜索关键字" clearable
            v-model="listQuery.keyword" />
        </el-form-item>
        <el-form-item label="数据来源：">
          <el-select clearable size="small" style="margin-bottom: 10px" v-model="listQuery.platform" placeholder="请选择">
            <el-option v-for="item in platformList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容分类：">
          <el-select size="small" style="margin-bottom: 10px" v-model="listQuery.type" placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品内容关键字：">
          <el-cascader v-model="listQuery.bankName" :options="bankList" collapse-tags :props="props" clearable
            size="small" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="handleResetList">重置</el-button>

          <el-button type="primary" icon="el-icon-search" @click="handleSearchList">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div style="
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 5px;
      ">
      <div class="box-left">
        <div>
          <!-- <el-input
          size="small"
          style="margin-bottom: 10px"
          placeholder="请输入搜索关键字"
          clearable
          v-model="listQuery.keyword"
          @input="handleChangeList"
          @keyup.enter.native="handleSearchList"
        /> -->
        </div>

        <div class="box-main" v-if="tableData.data.length > 0">
          <div class="list-item">
            <div @click="handleClick(item, idx)" :class="current === idx ? 'item-v-active' : 'item-v'"
              v-for="(item, idx) in tableData.data" :key="item.id">
              <div v-html="highlightText(item.title)"></div>
              <div style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                ">
                <span style="font-size: 12px">{{ item.createTime }}</span>
                <span style="font-size: 12px">来源: {{ item.platform }}</span>
              </div>
              <div style="color: #3a8ee6; text-align: right; font-size: 12px">
                <el-button icon="el-icon-delete" type="text" size="mini" @click="handleDelete(item)">删除</el-button>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div style="text-align: center; margin-top: 50px">
            <el-empty description="暂无数据"></el-empty>
          </div>
        </div>
        <el-pagination v-if="tableData.data.length > 0" background style="overflow: auto; padding: 10px" size="small"
           @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[20, 50, 100, 500]" :current-page="listQuery.pageNum" :total="tableData.total"
          :page-size="listQuery.pageSize" layout="total, sizes, prev,pager, next, jumper" />
      </div>

      <!--右侧内容-->
      <div class="box-right" v-loading="detailLoading">
        <div v-if="Object.keys(detailInfo).length > 0">
          <h4 style="text-align: center">{{ detailInfo.title }}</h4>
          <div style="text-align: center; margin-top: 20px">
            <span style="font-size: 14px">作者： {{ detailInfo.author }}</span>
            <span style="font-size: 14px; margin-left: 20px">创建时间：{{ detailInfo.createTime }}</span>
            <span style="font-size: 14px; margin-left: 20px">来源: {{ detailInfo.platform }}</span>
          </div>

          <div style="
              text-align: center;
              margin-top: 20px;
              color: #333;
              font-weight: bold;
            ">
            原链接: <a :href="detailInfo.fromLink">{{ detailInfo.fromLink }}</a>
            <div style="cursor: pointer; color: #3a8ee6; margin-top: 10px" @click="copyText(detailInfo.fromLink)">
              复制
            </div>
          </div>

          <el-button size="mini" icon="el-icon-copy-document" type="primary" style="margin-top: 20px"
            @click="copyText(detailInfo.content)">复制全文</el-button>
          <div style="margin-top: 20px" v-html="detailInfo.content"></div>
        </div>
        <div v-else>
          <div style="text-align: center; margin-top: 50px">
            <el-empty description="暂无数据"></el-empty>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getThirdMaterialList,
  getThirdMaterialDetail,
  deleteThirdMaterial,
} from "@/api/article";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      listQuery: {
        keyword: "",
        pageNum: 1,
        pageSize: 20,
        platform: "",
        bankName: [],
        type: "",
      },
      tableData: {
        data: [],
        total: 0,
      },
      noMore: false,
      current: 0,
      id: "",
      detailInfo: {},
      detailLoading: false,
      platformList: [
        
        
      ],
      typeList: [
        { label: "全部", value: "" },
        { label: "产品内容", value: "1" },
        { label: "运营内容", value: "0" },
        { label: "蓝豹-产品学习", value: "2" },
        { label: "蓝豹-技能学习", value: "3" },
        { label: "蓝豹-合同模版", value: "4" },
        { label: "蓝豹-实操作单经验", value: "5" },
      ],
      bankList: [
        {
          label: "中国银行",
          value: "中国银行",
          children: [
            {
              label: "企业贷",
              value: "企业贷",
            },
            {
              label: "商E贷",
              value: "商E贷",
            },
            {
              label: "商圈便利贷",
              value: "商圈便利贷",
            },
            {
              label: "烟商E贷",
              value: "烟商E贷",
            },
            {
              label: "益农贷",
              value: "益农贷",
            },
            {
              label: "种业贷",
              value: "种业贷",
            },
            {
              label: "科创贷",
              value: "科创贷",
            },
            {
              label: "税易贷",
              value: "税易贷",
            },
            {
              label: "惠如愿",
              value: "惠如愿",
            },
            {
              label: "银税贷",
              value: "银税贷",
            },
            {
              label: "中银企E贷",
              value: "中银企E贷",
            },
            {
              label: "黑龙江中银E农通",
              value: "黑龙江中银E农通",
            },
          ],
        },
        {
          label: "交通银行",
          value: "交通银行",
          children: [
            {
              label: "惠商贷",
              value: "惠商贷",
            },
            {
              label: "普惠e贷",
              value: "普惠e贷",
            },
            {
              label: "烟草贷",
              value: "烟草贷",
            },
            {
              label: "税融通",
              value: "税融通",
            },
          ],
        },
        {
          label: "农业银行",
          value: "农业银行",
          children: [
            {
              label: "专精特新小巨人贷",
              value: "专精特新小巨人贷",
            },
            {
              label: "冀时贷",
              value: "冀时贷",
            },
            {
              label: "助业快e贷",
              value: "助业快e贷",
            },
            {
              label: "商户贷",
              value: "商户贷",
            },
            {
              label: "普惠e贷",
              value: "普惠e贷",
            },
            {
              label: "微捷贷",
              value: "微捷贷",
            },
            {
              label: "惠农e贷",
              value: "惠农e贷",
            },
            {
              label: "抵押e贷",
              value: "抵押e贷",
            },
            {
              label: "科技e贷",
              value: "科技e贷",
            },
            {
              label: "纳税E贷",
              value: "纳税E贷",
            },
            {
              label: "商户E贷",
              value: "商户E贷",
            },
            {
              label: "烟草贷",
              value: "烟草贷",
            },
          ],
        },
        {
          label: "工商银行",
          value: "工商银行",
          children: [
            {
              label: "e企快贷",
              value: "e企快贷",
            },
            {
              label: "富宁贷",
              value: "富宁贷",
            },
            {
              label: "小微e贷",
              value: "小微e贷",
            },
            {
              label: "科创贷",
              value: "科创贷",
            },
            {
              label: "税务贷",
              value: "税务贷",
            },
            {
              label: "e链快贷",
              value: "e链快贷",
            },
            {
              label: "烟草e贷",
              value: "烟草e贷",
            },
            {
              label: "种植e贷",
              value: "种植e贷",
            },
            {
              label: "经营快贷",
              value: "经营快贷",
            },
          ],
        },
        {
          label: "建设银行",
          value: "建设银行",
          children: [
            {
              label: "个人经营抵押快贷",
              value: "个人经营抵押快贷",
            },
            {
              label: "云电贷",
              value: "云电贷",
            },
            {
              label: "云税贷",
              value: "云税贷",
            },
            {
              label: "商叶云贷",
              value: "商叶云贷",
            },
            {
              label: "善新贷",
              value: "善新贷",
            },
            {
              label: "外贸贷",
              value: "外贸贷",
            },
            {
              label: "汇票质押贷款",
              value: "汇票质押贷款",
            },
            {
              label: "经营快贷",
              value: "经营快贷",
            },
            {
              label: "质押快贷",
              value: "质押快贷",
            },
            {
              label: "银票质押贷",
              value: "银票质押贷",
            },
            {
              label: "商户云贷",
              value: "商户云贷",
            },
            {
              label: "善担贷",
              value: "善担贷",
            },
            {
              label: "政采云贷",
              value: "政采云贷",
            },
            {
              label: "结算云贷",
              value: "结算云贷",
            },
            {
              label: "铁路运费贷",
              value: "铁路运费贷",
            },
            {
              label: "首户快贷",
              value: "首户快贷",
            },
          ],
        },
        {
          label: "邮政银行",
          value: "邮政银行",
          children: [
            {
              label: "产业贷",
              value: "产业贷",
            },
            {
              label: "小企业房地产抵押贷",
              value: "小企业房地产抵押贷",
            },
            {
              label: "小微易贷",
              value: "小微易贷",
            },
            {
              label: "工程信易贷",
              value: "工程信易贷",
            },
            {
              label: "房产抵押贷",
              value: "房产抵押贷",
            },
            {
              label: "科技e贷",
              value: "科技e贷",
            },
            {
              label: "税金贷",
              value: "税金贷",
            },
            {
              label: "经营贷",
              value: "经营贷",
            },
            {
              label: "固定资产贷款",
              value: "固定资产贷款",
            },
          ],
        },
      ],
      props: {
        emitPath: true,
        multiple: true,
      },
    };
  },

  async created() {
    this.platformList = await this.$getDictData('materiallibrary_platform')
    // console.log(clist);
    // this.platformList = [this.platformList,...clist]
    this.getList();
  },

  methods: {
    onSselectuserr(node) {
      console.log(node);
    },
    handleResetList() {
      this.listQuery = {
        keyword: "",
        pageNum: 1,
        pageSize: 20,
        platform: "",
        bankName: [],
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    async copyText(data) {
      // 验证和清理输入数据
      if (typeof data !== 'string' || !data.trim()) {
        this.$message({
          message: "无效的复制内容",
          type: "error",
        });
        return;
      }
      try {
        await navigator.clipboard.writeText(data);
        this.$message({
          message: "复制成功",
          type: "success",
        });
      } catch (err) {
        this.$message({
          message: "复制失败，请重试",
          type: "error",
        });
      }
    },
    handleDelete(v) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteThirdMaterial(v.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => { });
    },
    getDetail() {
      this.detailLoading = true;
      getThirdMaterialDetail(this.id)
        .then((res) => {
          this.detailInfo = res.data;
          this.detailLoading = false;
        })
        .finally(() => {
          this.detailLoading = false;
        });
    },
    handleClick(v, idx) {
      if (this.current === idx) return;
      this.current = idx;
      this.id = v.id;
      this.getDetail();
    },
    handleChangeList(val) {
      this.tableData.data = [];
      this.listQuery.keyword = val;
      this.listQuery.pageNum = 1;
      this.getList();
    },

    handleSearchList() {
      this.tableData.data = [];
      this.listQuery.pageNum = 1;
      this.getList();
    },
    bankNameFun(data) {
      const result = data.reduce((acc, [bank, loan]) => {
        if (!acc[bank]) {
          acc[bank] = [];
        }
        acc[bank].push(loan);
        return acc;
      }, {});
      const formattedResult = Object.entries(result).map(([bank, loans]) => {
        // return `${bank}-${loans.join(",")}`;


        return {
          bankName: bank,
          names: loans
        }
      });

      return formattedResult;
    },
    getList(v) {
      this.detailInfo = {};

      let params = Object.assign({}, this.listQuery);
      params.bankNames = this.bankNameFun(params.bankName)
      delete params.bankName;
      getThirdMaterialList(params).then((res) => {
        this.tableData.data = res.data.list;
        this.tableData.total = res.data.total;
        this.id = res.data.list.length > 0 ? res.data.list[0].id : "";
        this.id && this.getDetail();
      });
    },
    highlightText(text) {
      const keyword = this.listQuery.keyword.trim();
      if (!keyword) return text;
      const regex = new RegExp(`(${keyword})`, "gi");
      return text.replace(regex, '<span style="color: red ;">$1</span>');
    },
  },
};
</script>

<style scoped>
.app-container {
  background-color: #f5f5f5;
}

.box-left {
  margin-right: 10px;
  width: 20%;
  height: calc(100vh - 200px);
  min-width: 450px;
  background: white;
  padding: 20px 10px;
  position: relative;

  .box-main {
    height: calc(100% - 70px);
    overflow: auto;
  }

  .list-item {
    .item-v {
      margin-top: 10px;
      cursor: pointer;
      padding: 20px;
      line-height: 30px;
      background-color: #f5f5f5;
    }

    .item-v:hover {
      background-color: #e6e6e6;
    }

    .item-v-active {
      margin-top: 10px;
      cursor: pointer;
      padding: 20px;
      line-height: 30px;
      background-color: #e6e6e6;
    }
  }

  .page-foot {
    position: fixed;
    bottom: 30px;
  }
}

.box-right {
  width: 78%;
  height: calc(100vh - 200px);
  background: white;
  overflow: auto;
  padding: 20px 10px;
}

.infinite-list {
  list-style: none;

  >li {
    padding: 10px;
    background-color: #fff;
  }
}
</style>
